<template>
    <transition name="minTips-fade">
        <div
            class="minTips"
            v-show="visible"
           >
        <p>{{ message }}</p>
        </div>
    </transition>
</template>

<script type="text/babel">
    export default {
        data() {
            return {
                visible: false,
                duration: 3000,
                message: '',
                onClose: null,
                closed: false,
                timer: null
            };
        },
        computed: {

        },
        watch: {
            closed(newVal) {
                if (newVal) {
                    this.visible = false;
                    this.$el.addEventListener('transitionend', this.destroyElement);
                }
            }
        },
        methods: {
            destroyElement() {
                this.$el.removeEventListener('transitionend', this.destroyElement);
                this.$destroy(true);
                this.$el.parentNode.removeChild(this.$el);
            },
            close() {
                this.closed = true;
                if (typeof this.onClose === 'function') {
                    this.onClose(this);
                }
            },
            startTimer() {
                if (this.duration > 0) {
                    this.timer = setTimeout(() => {
                        if (!this.closed) {
                            this.close();
                        }
                    }, this.duration);
                }
            }
        },
        mounted() {
            this.startTimer();
        }
    };
</script>